
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
</head>
<body>

<style>
    .div-flex {
        display: flex;
        align-items: center;
        justify-content: left;
    }

    .width-160 {
        width: 200px;
    }
    .layui-table th {
        text-align: center;
    }
    .table-margin{
        margin-left: 50px;
        margin-right: 50px;
        text-align: center;
    }
    .image{
        height:80px;
        width: 80px;
    }

    .mt50{
        margin-left: 50px;
    }

</style>

<div class="layui-card-body" >
    <!--基本信息-->
    <div class="layui-form" lay-filter="layuiadmin-form-order" id="layuiadmin-form-order" >
    <input type="hidden" class="order_id" name="order_id" value="8">

    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>订单信息</legend>
        </fieldset>
    </div>

    <div class="layui-form-item div-flex">
        <label class="layui-form-label ">订单编号:</label>
        <div class="width-160">202106101005483976</div>
        <label class="layui-form-label ">订单类型:</label>
        <div class="width-160">普通订单(h5商城)</div>
        <label class="layui-form-label ">下单时间:</label>
        <div class="width-160">2021-06-10 10:05:48</div>
    </div>

    <div class="layui-form-item div-flex">
        <label class="layui-form-label ">支付时间:</label>
        <div class="width-160">未支付</div>
        <label class="layui-form-label ">支付状态:</label>
        <div class="width-160">待支付</div>
        <label class="layui-form-label ">订单状态:</label>
        <div class="width-160">待付款</div>
    </div>

    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>会员信息</legend>
        </fieldset>
    </div>

    <div class="layui-form-item div-flex">
        <label class="layui-form-label ">会员编号:</label>
        <div class="width-160"></div>
        <label class="layui-form-label ">会员昵称:</label>
        <div class="width-160">gdd</div>
        <label class="layui-form-label ">手机号码:</label>
        <div class="width-160">15680768568</div>
    </div>

    <div class="layui-form-item div-flex">
        <label class="layui-form-label ">性别:</label>
        <div class="width-160">未知</div>
        <label class="layui-form-label ">注册时间:</label>
        <div class="width-160">1970-01-01 08:00:00</div>
    </div>


    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>收货信息</legend>
        </fieldset>
    </div>

    <div class="layui-form-item div-flex">
        <label class="layui-form-label ">收货人:</label>
        <div class="width-160">测试员</div>
        <label class="layui-form-label ">手机号:</label>
        <div class="width-160">15680768566</div>
        <label class="layui-form-label ">收货地址:</label>
        <div class="width-160">北京北京市东城区xx街道xxx小区</div>
    </div>


    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>商品信息</legend>
        </fieldset>
    </div>

    <div class="layui-form-item table-margin">
        <table class="layui-table">
                <colgroup>
                    <col width="250">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                </colgroup>
                <thead>
                <tr>
                    <th>商品信息</th>
                    <th>价格(元)</th>
                    <th>数量</th>
                    <th>小计(元)</th>
                </tr>
                </thead>
                <tbody>
                                <tr>
                    <td>
                        <div style="text-align: left">
                            <div class="layui-col-md3">
                                <img src="/uploads/images/background/20201210/956e95bc35d0a8005255889036e9aae5.png" class="image-show image" >
                            </div>
                            <div class="layui-col-md9">
                                <p style="margin-top: 10px">小米文具可削铅笔 六角2B 红黑抽条 木杆铅笔 儿童铅笔 AWP30804</p>
                                <br>
                                <p>默认</p>
                            </div>
                        </div>
                    </td>
                    <td>￥6.00</td>
                    <td>1</td>
                    <td>6.00</td>
                </tr>
                                <tr>
                    <td>
                        <div style="text-align: left">
                            <div class="layui-col-md3">
                                <img src="/uploads/images/background/20201210/551c831039db5df10f16bbd40ba0ebc0.png" class="image-show image" >
                            </div>
                            <div class="layui-col-md9">
                                <p style="margin-top: 10px">小米大容量一体式全针管中性笔办公签字笔5倍书写长度学生考试刷题作业神器水笔1支顶5支</p>
                                <br>
                                <p>默认</p>
                            </div>
                        </div>
                    </td>
                    <td>￥29.00</td>
                    <td>1</td>
                    <td>29.00</td>
                </tr>
                                <tr>
                    <td>
                        <div style="text-align: left">
                            <div class="layui-col-md3">
                                <img src="/uploads/images/background/20201210/5e11c751c7e662764764e132ab6a8f72.png" class="image-show image" >
                            </div>
                            <div class="layui-col-md9">
                                <p style="margin-top: 10px">HERO/英雄钢笔HS208女神钢笔成人女士商务高档礼盒装办公时尚练字女生专用精致送礼官方正品代写贺卡</p>
                                <br>
                                <p>默认</p>
                            </div>
                        </div>
                    </td>
                    <td>￥1359.00</td>
                    <td>1</td>
                    <td>1359.00</td>
                </tr>
                                <tr>
                    <td>
                        <div style="text-align: left">
                            <div class="layui-col-md3">
                                <img src="/uploads/images/background/20201210/f245c44d136296f80071a26765e93cdf.png" class="image-show image" >
                            </div>
                            <div class="layui-col-md9">
                                <p style="margin-top: 10px">日本进口pilot百乐贵客钢笔 硬橡胶生漆18k金笔fkv-88sr莳绘30号金尖限定万年笔商务礼品套装</p>
                                <br>
                                <p>默认</p>
                            </div>
                        </div>
                    </td>
                    <td>￥6860.00</td>
                    <td>1</td>
                    <td>6860.00</td>
                </tr>
                                <tr>
                    <td colspan="3"></td>
                    <td style="text-align: left">
                        <p>商品金额:￥8254.00</p>
                        <p>运费金额:￥0.00</p>
                        <p style="color: red">优惠金额:￥0.00</p>
                        <p>应付金额:￥8254.00</p>
                        <p>支付方式:微信支付</p>
                    </td>
                </tr>
                </tbody>
            </table>
    </div>

    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>买家留言</legend>
        </fieldset>
    </div>

    <div class="layui-form-item table-margin">
        <textarea class="layui-textarea" disabled></textarea>
    </div>


    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>订单操作</legend>
        </fieldset>
    </div>

    <div class="layui-form-item div-flex ">
        <div class="layui-input-block ">
                        <button type="submit" class="layui-btn layui-btn-sm layui-btn-danger width_160 " id="cancel">取消订单</button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary width_160 " id="back">返回</button>
        </div>
    </div>


    <div class="layui-form-item">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>订单日志</legend>
        </fieldset>
    </div>

    <div class="layui-form-item table-margin">
        <table class="layui-table">
            <colgroup>
                <col width="100">
                <col width="100">
                <col width="250">
            </colgroup>
            <thead>
            <tr>
                <th>日期</th>
                <th>动作类型</th>
                <th>日志内容</th>
            </tr>
            </thead>
            <tbody>
                                    <tr>
                        <td>2021-06-10 10:05:48</td>
                        <td>会员提交订单</td>
                        <td>会员提交订单</td>
                    </tr>
                                                </tbody>
        </table>
    </div>


</div>
</div>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>

<script type="text/javascript">
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作

    layui.config({
        version:"2.3.0.20210326",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'element', 'jquery', 'like'], function () {
        var $ = layui.$;
        var like = layui.like;

        //主图放大
        $(document).on('click', '.image-show', function () {
            var src = $(this).attr('src');
            like.showImg(src,600);
        });


        $('#back').click(function () {
            var index=parent.layer.getFrameIndex(window.name); //获取当前窗口的name
            parent.layer.close(index);
            parent.layui.table.reload('order-lists');
            return true;
        });

        //取消订单
        $('#cancel').click(function () {
            var order_id = $('.order_id').val();
            layer.confirm('确认取消订单吗?', {
                btn: ['确认','取消'] //按钮
            }, function(){
                like.ajax({
                    url: '/admin/order/cancel.html'
                    , data: {'order_id': order_id}
                    , type: 'post'
                    , success: function (res) {
                        if (res.code == 1) {
                            layui.layer.msg(res.msg, {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            },function () {
                                location.reload();
                            });
                        }
                    }
                });
            });
        });


        //删除订单
        $('#del').click(function () {
            var order_id = $('.order_id').val();
            layer.confirm('删除后订单将消失，确认删除订单吗?', {
                btn: ['确认','取消'] //按钮
            }, function(){
                like.ajax({
                    url: '/admin/order/del.html'
                    , data: {'order_id': order_id}
                    , type: 'post'
                    , success: function (res) {
                        if (res.code == 1) {
                            layui.layer.msg(res.msg, {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            },function () {
                                location.reload();
                            });
                        }
                    }
                });
            });
        });


        //退款
        $('#refund').click(function () {
            var order_id = $('.order_id').val();
            layer.msg('暂不可退');
        });

        //发货
        $('#delivery').click(function () {
            var id = $('.order_id').val();
            layer.open({
                type: 2
                ,title: '订单发货'
                ,content: '/admin/order/delivery.html?id='+id
                ,area: ['90%', '90%']
                ,yes: function(index, layero){
                }
            })
        });

        //确认收货
        $('#confirm').click(function () {
            var id = $('.order_id').val();
            layer.confirm('确认订单商品已收货吗？?', {
                btn: ['确认','取消'] //按钮
            }, function(){
                like.ajax({
                    url: '/admin/order/confirm.html'
                    , data: {'order_id': id}
                    , type: 'post'
                    , success: function (res) {
                        if (res.code == 1) {
                            layui.layer.msg(res.msg, {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            },function () {
                                location.reload();
                            });
                        }
                    },
                });
            });
        });

    });
</script>
</body>
</html>